<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 15:47:05
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-05-16 17:13:54
 * @FilePath: \jzjy\src\views\ResourceCenter\resDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 资源详情页 -->
  <div id="container">
    <div class="top">
      <div class="bread">
        <span class="nowAdreess">当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch">{{routeName}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: routeurl+'?from=res'+'&Top=' + gundongTop}" v-if="!isSearch">{{routeName}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: fromPath +'?from=res'+'&Top=' + gundongTop + '&bigTap=' + bigTap }" v-if="bigTapName">{{ bigTapName }}</el-breadcrumb-item>
          <el-breadcrumb-item
            v-show="mb_bookTitle"
            :to="{
              path:
                routeurl+'?from=res'+'&Top' +
                gundongTop + '&bigTap=' + bigTap +
                '&mb_bookTitle=' +
                mb_bookTitle +
                '&mb_book_id=' +
                mb_book_id +
                '&mb_searchTitle=' +
                mb_searchTitle +
                '&mb_bookIndex=' +
                mb_bookIndex +
                '&mb_nj_id=' +
                mb_nj_id +
                '&mb_page=' +
                mb_page,
            }"
            >{{ mb_bookTitle }}</el-breadcrumb-item
          >
          <el-breadcrumb-item
            v-show="mb_muluTitle"
            :to="{
              path:
                routeurl+'?from=res'+'&Top' +
                gundongTop + '&bigTap=' + bigTap +
                '&mb_bookTitle=' +
                mb_bookTitle +
                '&mb_muluTitle=' +
                mb_muluTitle +
                '&mb_book_id=' +
                mb_book_id +
                '&mb_mulu_id=' +
                mb_mulu_id +
                '&mb_searchTitle=' +
                mb_searchTitle +
                '&mb_bookIndex=' +
                mb_bookIndex +
                '&mb_nj_id=' +
                mb_nj_id +
                '&mb_page=' +
                mb_page,
            }"
            >{{ mb_muluTitle }}</el-breadcrumb-item
          >
          <el-breadcrumb-item
            v-show="mb_tapTitle"
            :to="{
              path:
                routeurl+'?from=res'+'&Top' +
                gundongTop + '&bigTap=' + bigTap +
                '&mb_bookTitle=' +
                mb_bookTitle +
                '&mb_muluTitle=' +
                mb_muluTitle +
                '&mb_book_id=' +
                mb_book_id +
                '&mb_mulu_id=' +
                mb_mulu_id +
                '&mb_tapTitle=' +
                mb_tapTitle +
                '&mb_tap_id=' +
                mb_tap_id +
                '&mb_type_id=' +
                mb_type_id +
                '&mb_searchTitle=' +
                mb_searchTitle +
                '&mb_bookIndex=' +
                mb_bookIndex +
                '&mb_nj_id=' +
                mb_nj_id +
                '&mb_page=' +
                mb_page,
            }"
            >{{ mb_tapTitle }}</el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><p>{{ bread_title }}</p></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>

      <div class="beikeziyuan">
        <div class="beike">
          <img
            src="../../assets/img/resFile (1).png"
            alt="file_url"
            v-if="
              suffix == 'ppt' ||
              suffix == 'pptx' ||
              suffix == 'ppsx' ||
              suffix == 'pps'
            "
          />
          <img
            src="../../assets/img/resFile (2).png"
            alt="file_url"
            v-if="suffix == 'mp4' || suffix == 'rm'"
          />
          <img
            src="../../assets/img/resFile (3).png"
            alt="file_url"
            v-if="suffix == 'xls' || suffix == 'xlsx'"
          />
          <img
            src="../../assets/img/resFile (4).png"
            alt="file_url"
            v-if="suffix == 'zip' || suffix == 'rar'"
          />
          <img
            src="../../assets/img/resFile (5).png"
            alt="file_url"
            v-if="suffix == 'm4a' || suffix == 'mp3'"
          />
          <img
            src="../../assets/img/resFile (6).png"
            alt="file_url"
            v-if="suffix == 'doc' || suffix == 'docx'"
          />
          <img
            src="../../assets/img/resFile (7).png"
            alt="file_url"
            v-if="suffix == 'pdf'"
          />
          <img
            src="../../assets/img/resFile (8).png"
            alt="file_url"
            v-if="suffix == 'png' || suffix == 'jpg'"
          />
          <div class="details">
            <div class="title">
              <span v-if="is_tj == 1">推荐</span>
              <h3>{{ title }}</h3>
            </div>
            <div class="msg">
              <div class="intro">
                <p
                  v-html="intro"
                  v-show="suffix != 'zip' && suffix != 'rar'"
                ></p>
                <p
                  v-for="(item, index) in kejianlist"
                  :key="index"
                  v-show="suffix == 'zip' || suffix == 'rar'"
                >
                  {{ item }}
                </p>
              </div>
              <div
                class="tips"
                v-show="suffix == 'zip' || suffix == 'rar'"
                v-if="kejianlist.length > 3"
              >
                ...
              </div>
              <div class="bottom">
                <span class="upTime" v-if="from_int != 10"
                  >更新于{{ update_time }}</span
                >
                <span
                  class="upTime"
                  v-if="from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span>
                <!-- <span class="rate"
                  ><span style="margin-right: 5px">精选指数</span>
                  <el-rate disabled v-model="rateValue"></el-rate
                ></span> -->
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ viewCount }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="collect" v-if="sc_status == 0" @click="getCollect">
          <i class="el-icon-star-off"></i>
          <p>收藏本资源</p>
        </div>
        <div class="collect getsc" v-if="sc_status == 1" @click="cancelCollect">
          <i class="el-icon-star-on"></i>
          <p>已收藏</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left" v-if="!nothingShow">
        <div class="pptTop">
          <span>资源预览</span>
          <div class="progress">{{ pic_id + 1 }}/{{ p_nums }}页</div>
        </div>
        <div class="pptLeft">
          <div class="smallPic">
            <div
              class="pics"
              :class="{ choseImg: pic_id == index }"
              v-for="(item, index) in file_lists"
              :key="item.id"
              @click="chosePic(index)"
            >
              <img :src="item.ico_url" />
            </div>
          </div>
        </div>
        <div class="pptRight" @contextmenu.prevent="menuPlayer()">
          <div class="bigPic" v-for="item in file_lists" :key="item.id">
            <img
              :src="item.file_url"
              alt=""
              v-if="
                item.file_ext == 'png' ||
                item.file_ext == 'jpg' ||
                item.file_ext == 'doc' ||
                item.file_ext == 'png' ||
                item.file_ext == 'docx' ||
                item.file_ext == 'xls' ||
                item.file_ext == 'pdf' ||
                item.file_ext == 'xlsx' ||
                item.file_ext == 'webp'
              "
            />
            <video
              muted="muted"
              class="video"
              :src="item.file_url"
              height="448px"
              width="700px"
              type="video/mp4"
              controls="controls"
              loop="-1"
              preload
              ref="startvideo"
              v-if="item.file_ext == 'mp4' || item.file_ext == 'rm'"
            ></video>
            <div
              class="mp3File"
              v-if="item.file_ext == 'mp3' || item.file_ext == 'm4a'"
            >
              <img
                src="../../assets/img/resFile (5).png"
                alt=""
                style="width: 74px"
              />
              <p>{{ item.title }}</p>
              <audio :src="item.file_url" controls></audio>
            </div>
          </div>
          <div class="jindu"></div>
          <p class="jindutext">已预览{{ v_per }}%，完整内容可下载后查看哦！</p>
          <div class="downlond">
            <span>{{ title }}</span>
            <div class="downFile" @click="downLoad">下载资源</div>
          </div>
        </div>
      </div>
      <div class="left noFile" v-if="nothingShow">
        <div class="pptTop">
          <span>资源预览</span>
          <div class="progress">{{ pic_id + 1 }}/{{ p_nums }}页</div>
        </div>
        <p>当前文件暂无法提供预览，请您下载后查看</p>
        <div class="downlond">
          <span>{{ title }}</span>
          <div class="downFile" @click="downLoad">下载资源</div>
        </div>
      </div>
      <div class="right">
        <div class="righttop">
          <div class="title2">
            <span></span>
            <h2>更多资源推荐</h2>
          </div>
          <div
            id="box"
            v-for="item in tjkejian"
            :key="item.id"
            @click="goresDetails(item.id, item.lx, item.suffix)"
          >
            <img src="../../assets/img/ziyuan.png" v-if="item.lx == 2" style="height:auto"/>
            <img
              src="../../assets/img/resFile (1).png"
              alt="file_url"
              v-if="
                item.suffix == 'ppt' ||
                item.suffix == 'pptx' ||
                item.suffix == 'ppsx' ||
                item.suffix == 'pps'
              "
            />
            <img
              src="../../assets/img/resFile (2).png"
              alt="file_url"
              v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
            />
            <img
              src="../../assets/img/resFile (3).png"
              alt="file_url"
              v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
            />
            <img
              src="../../assets/img/resFile (4).png"
              alt="file_url"
              v-if="item.suffix == 'zip' || item.suffix == 'rar'"
            />
            <img
              src="../../assets/img/resFile (5).png"
              alt="file_url"
              v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
            />
            <img
              src="../../assets/img/resFile (6).png"
              alt="file_url"
              v-if="item.suffix == 'doc' || item.suffix == 'docx'"
            />
            <img
              src="../../assets/img/resFile (7).png"
              alt="file_url"
              v-if="item.suffix == 'pdf'"
            />
            <img
              src="../../assets/img/resFile (8).png"
              alt="file_url"
              v-if="item.suffix == 'png' || item.suffix == 'jpg'"
            />
            <div class="msg">
              <div class="title"><img src="../../assets/img/newBiaoqian.png" v-show="item.is_new == 1">{{ item.title }}</div>
              <!-- <p
                v-html="item.sub_info"
                v-if="item.lx == 2"
                style="height: 47px"
              ></p>
              <p v-if="!item.lx || item.lx == 1" style="height: 47px">
                {{ item.intro == "" ? "暂无" : item.intro }}
              </p> -->
              <div class="bottom">
                <span class="upTime" v-if="item.from_int != 10">
                  更新于{{ timeStamp2String(item.update_time * 1000, 2) }}
                </span>
                <span
                  class="upTime"
                  v-if="item.from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span>
                <!-- <span class="rate"
                  ><span style="margin-right: 5px">精选指数</span>
                  <el-rate disabled v-model="item.tjzs"></el-rate
                ></span> -->
                <span class="seeNum" v-if="!item.lx || item.lx == 1"
                  ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                >
                <span class="seeNum" v-if="item.lx == 2"
                  ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="rightbottom" v-if="loginStatus == 1">
          <div class="title2">
            <span></span>
            <h3>相关推荐</h3>
          </div>
          <div class="box">
            <div class="pic">
              <img :src="book_file_url" alt="" />
            </div>
            <h3>{{ book_title }}</h3>
            <p>
              {{ synopsis }}
            </p>
            <span @click="seebook">查看样书</span>
          </div>
        </div>
      </div>
    </div>

    <div class="guanggao" v-if="bannerList.length > 0">
      <div class="banner">
        <el-carousel height="160px" indicator-position="none" arrow="never">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.file_url"
              alt="banner图"
              @click="advert(item.http_url)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div
      class="guanggao"
      v-if="bannerList.length <= 0"
      style="background: #f0f0f5; height: 40px"
    ></div>
    <!-- 下载登录弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      custom-class="login"
    >
    <LoginTc/>
    </el-dialog>
  </div>
</template>
<script>
import LoginTc from "../../layout/components/loginTc.vue"
import { timeStamp2String } from "../../utils/time";
import {
  islogin,
  info_kejian,
  url_kejian,
  tjkejian,
  userinfo,
  banner,
  getbookbyresource,
  create_accountzysc,
  wxdlewm,
  upwxdl
} from "../../api/http";
export default {
  inject: ["reload"], //刷新页面
  components: {
    LoginTc
  },
  data() {
    return {
      gundongTop: 0, //资源中心跳转过来时的滚动条高度
      timeStamp2String,
      kejianid: "", //当前需要展示的课件id
      bread_title: "", //面包屑的详情资源名称
      suffix: "", //课件类型
      is_tj: 0, //是否为推荐
      title: "", //课件的标题
      intro: "", //课件的简介
      from_int: "", //判断是否为精选
      update_time: "", //更新时间
      viewCount: 0, //浏览人数
      file_lists: [], //图片列表
      kejianlist: [], //如果是压缩包，展示在简介位置的课件标题列表
      nothingShow: false,
      v_nums: 0, //可预览页数
      p_nums: 0, //总页数
      pic_id: 0, //当前点击的小图片id
      tjkejian: [], //推荐的课件列表
      v_per: 0, //预览进度
      nianji_ids: "", //年级id
      kemu_ids: "", //科目id
      bannerList: [], //广告图列表

      // query参数相关
      bigTapName: "", //同步资源跳转过来的太菜单名称
      fromPath: "", //跳转过来的路径

      //资源详情页推荐图书
      book_file_url: "", //图书封面
      author: "", //作者
      synopsis: "", //图书简介
      book_title: "", //图书标题

      //后期添加面包屑筛选记录所需内容
      routeurl:'',//路径
      routeName:'',//路径名
      mb_bookTitle: "", //书本名
      mb_muluTitle: "", //书本目录名
      // mb_kewenTitle: "", //课文名
      mb_tapTitle: "", //分类名
      mb_tagTitle: "", //标签名
      mb_book_id: "", //书本id
      mb_mulu_id: "", //书本目录id
      mb_tap_id: "", //分类id
      mb_tag_id: "", //标签id
      mb_nj_id: "", //年级id
      mb_type_id: "", //分类大类型id
      mb_searchTitle: "", //搜索名
      mb_bookIndex: "", //第几本书
      mb_page: "", //第几页

      sc_status: "", //是否收藏
      dialogVisible: false, //登录弹窗展示
      loginEvm: "", //扫码登陆二维码
      evmTimer: null, //扫码状态获取计时器
      rateValue: "", //课件评分
      loginStatus: "", //登录状态
      bigTap:'',//同步资源主页传的大菜单值

      //是否是搜索页跳转来的
      isSearch:false,
    };
  },
  created() {
    console.log(this.$route.query, "query参数");
    if(this.$route.query.path){
      localStorage.setItem('path',this.$route.query.path)
      this.routeName = this.$route.query.routeName
      this.routeurl = this.$route.query.path
      // this.$emit("pathpath", {tips:"ziyuan",path:this.routeurl});
      this.$emit("pathpath", this.routeurl);
    }
    this.bigTap = this.$route.query.bigTap
    this.gundongTop = this.$route.query.gundongTop;
    this.kejianid = this.$route.query.id; //课件id
    this.bigTapName = this.$route.query.bigTapName ? this.$route.query.bigTapName : ""; //跳转过来的页面name
    this.fromPath = this.$route.query.path ? this.$route.query.path : ""; //跳转过来的页面路径
     //是否是搜索页 或首页跳转来的
    if(this.$route.query.isSearch || this.$route.query.isIndex){
      this.routeurl = this.$route.query.path
      this.isSearch = 1
    }

    //面包屑筛选相关参数
    this.mb_bookTitle = this.$route.query.mb_bookTitle
      ? this.$route.query.mb_bookTitle
      : "";
    this.mb_muluTitle = this.$route.query.mb_muluTitle
      ? this.$route.query.mb_muluTitle
      : "";
    this.mb_tapTitle = this.$route.query.mb_tapTitle
      ? this.$route.query.mb_tapTitle
      : "";
    this.mb_tagTitle = this.$route.query.mb_tagTitle
      ? this.$route.query.mb_tagTitle
      : "";
    this.mb_book_id = this.$route.query.bookid;
    this.mb_mulu_id = this.$route.query.muluid ? this.$route.query.muluid : 0;
    this.mb_tap_id = this.$route.query.fenleiid;
    this.mb_tag_id = this.$route.query.tgid;
    this.mb_nj_id = this.$route.query.njid;
    this.mb_type_id = this.$route.query.typeid;
    this.mb_searchTitle = this.$route.query.searchTitle;
    this.mb_bookIndex = this.$route.query.index;
    this.mb_page = this.$route.query.mb_page;
    //判断是否登录
    islogin({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res.retRes.login_status, "是否登录");
      this.loginStatus = res.retRes.login_status;
      if (this.loginStatus == 1) {
        //获取个人信息拿取广告图
        userinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          console.log(res, "个人信息");
          const data = res.retRes;
          this.nianji_ids = data.nianji_id;
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            if (res.retInt == 1) {
              if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
                this.$router.push({
                  name: "Login",
                  query: {
                    isgq: 1,
                  },
                });
              } else {
                console.log(res, "课件详情");
                const data = res.retRes;
                (this.kemu_ids = data.kemu_id), (this.bread_title = data.title);
                this.suffix = data.suffix;
                this.title = data.title;
                this.intro = data.intro == "" ? "暂无简介" : data.intro;
                this.from_int = data.from_int;
                this.update_time = timeStamp2String(data.update_time * 1000, 2);
                this.viewCount = data.viewCount;
                this.file_lists = data.file_lists;
                this.sc_status = data.sc_status;
                this.rateValue = data.tjzs;
                if (data.file_lists.length == 0) {
                  this.nothingShow = true;
                } else {
                  this.nothingShow = false;
                }
                this.v_per = data.v_per;
                this.v_nums = data.v_nums;
                this.p_nums = data.p_nums;
                this.kejianlist = [];
                if (this.suffix == "zip" || this.suffix == "rar") {
                  this.file_lists.forEach((item) => {
                    this.kejianlist.push(item.group_title);
                  });
                  this.kejianlist = Array.from(new Set(this.kejianlist));
                  console.log(this.kejianlist, "抽出来的所有课件标题");
                }

                //获取详情页广告图
                banner({
                  md5key: localStorage.getItem("md5key"),
                  systypes_id: 10004,
                  device_type_id: 201,
                  nianji_ids: this.nianji_ids,
                  kemu_ids: this.kemu_ids,
                }).then((res) => {
                  console.log(res, "资源详情页广告图");
                  this.bannerList = res.retRes;
                });
                //获取资源页详情推荐图书
                getbookbyresource({
                  md5key: localStorage.getItem("md5key"),
                  kemu_id: this.kemu_ids,
                }).then((res) => {
                  console.log(res, "资源详情页推荐图书");
                  const data = res.retRes;
                  this.book_file_url = data[0].file_url;
                  this.book_title = data[0].title;
                  this.synopsis = data[0].synopsis;
                  this.book_id = data[0].id;
                });
              }
            }
          });
        });
      } else {
        info_kejian({
          md5key: localStorage.getItem("md5key"),
          id: this.kejianid,
        }).then((res) => {
          if (res.retInt == 1) {
            if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
              this.$router.push({
                name: "Login",
                query: {
                  isgq: 1,
                },
              });
            } else {
              console.log(res, "课件详情");
              const data = res.retRes;
              (this.kemu_ids = data.kemu_id), (this.bread_title = data.title);
              this.suffix = data.suffix;
              this.title = data.title;
              this.intro = data.intro == "" ? "暂无简介" : data.intro;
              this.from_int = data.from_int;
              this.update_time = timeStamp2String(data.update_time * 1000, 2);
              this.viewCount = data.viewCount;
              this.file_lists = data.file_lists;
              this.sc_status = data.sc_status;
              this.rateValue = data.tjzs;
              if (data.file_lists.length == 0) {
                this.nothingShow = true;
              } else {
                this.nothingShow = false;
              }
              this.v_per = data.v_per;
              this.v_nums = data.v_nums;
              this.p_nums = data.p_nums;
              this.kejianlist = [];
              if (this.suffix == "zip" || this.suffix == "rar") {
                this.file_lists.forEach((item) => {
                  this.kejianlist.push(item.group_title);
                });
                this.kejianlist = Array.from(new Set(this.kejianlist));
                console.log(this.kejianlist, "抽出来的所有课件标题");
              }
            }
          }
        });
      }
    });

    //将储存修改为资源中心
    // localStorage.setItem("path", 1);
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });

    //根据课件id来推荐的右侧课件列表
    tjkejian({
      md5key: localStorage.getItem("md5key"),
      id: this.kejianid,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "推荐的课件列表");
        this.tjkejian = res.retRes;
      }
    });
  },
  mounted() {
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  methods: {
    //收藏
    getCollect() {
      const ids = [];
      ids.push(this.kejianid);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 1,
        status: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //取消收藏
    cancelCollect() {
      const ids = [];
      ids.push(this.kejianid);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 1,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianid,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //点击查看样书
    seebook() {
      this.$router.push({
        name: "ProductDetails",
        query: {
          id: this.book_id,
        },
      });
    },
    menuPlayer() {
      console.log("禁止右键");
    },
    //监听滚动事件
    handleScrollY() {
      if (
        this.nothingShow == false &&
        this.suffix != "mp3" &&
        this.suffix != "m4a"
      ) {
        const pptLeft = document.getElementsByClassName("pptLeft")[0]; //需要指定的最左侧小预览图
        const smallPic = document.getElementsByClassName("smallPic")[0]; //需要指定的最左侧小预览图
        const downFile = document.getElementsByClassName("downFile")[0]; //下载
        const pptTop = document.getElementsByClassName("pptTop")[0]; //左侧顶部资源预览进度展示
        const righttop = document.getElementsByClassName("righttop")[0]; //右侧更多资源推荐
        const rightbottom = document.getElementsByClassName("rightbottom")[0]; //右侧相关推荐
        const guanggao = document.getElementsByClassName("guanggao")[0]; //底部广告图
        const left = document.getElementsByClassName("left")[0]; //整个左侧
        // const gundong = document.documentElement.scrollTop
        // console.log(document.documentElement.scrollTop)
        // console.log(pptLeft.getBoundingClientRect().top,123)
        if (pptLeft.getBoundingClientRect().top < 100) {
          smallPic.style.position = "fixed";
          smallPic.style.top = "120px";
          pptTop.style.position = "fixed";
          pptTop.style.top = "80px";
        } else if (pptLeft.getBoundingClientRect().top > 100) {
          smallPic.style.position = "static";
          smallPic.style.top = "0px";
          pptTop.style.position = "static";
          pptTop.style.top = "0px";
        }
        if (
          righttop.getBoundingClientRect().bottom < 100 &&
          this.file_lists.length > 3
        ) {
          rightbottom.style.position = "fixed";
          rightbottom.style.top = "80px";
        } else if (
          righttop.getBoundingClientRect().bottom > 100 &&
          this.file_lists.length > 3
        ) {
          rightbottom.style.position = "static";
          rightbottom.style.top = "0px";
        } else {
          // rightbottom.style.position = "static";
          // rightbottom.style.top = "0px";
        }
        // console.log(guanggao.getBoundingClientRect().top-document.documentElement.clientHeight)
        // console.log(guanggao.getBoundingClientRect().top - smallPic.getBoundingClientRect().bottom)
        const picHeight =
          guanggao.getBoundingClientRect().top -
          smallPic.getBoundingClientRect().bottom; //广告和预览图之间的距离
        const proHeight =
          guanggao.getBoundingClientRect().top -
          rightbottom.getBoundingClientRect().bottom; //广告右侧产品推荐之间的距离
        if (picHeight < 0) {
          smallPic.style.top = 100 + picHeight + "px";
        }
        if (proHeight < 0) {
          rightbottom.style.top = 60 + proHeight + "px";
        }
        if (downFile.getBoundingClientRect().top < 586) {
          // smallPic.style.position = "static";
          // smallPic.style.top = "0px";
          // pptTop.style.position = "static";
          // pptTop.style.top = "0px";
          // rightbottom.style.position = "static";
          // rightbottom.style.top = "0px";
        }
      } else {
        const downlond = document.getElementsByClassName("downlond")[0]; //下载按钮
        const rightbottom = document.getElementsByClassName("rightbottom")[0]; //右侧相关推荐
        if (
          rightbottom.getBoundingClientRect().bottom >
          document.body.clientHeight
        ) {
          downlond.style.position = "fixed";
          downlond.style.bottom = "0px";
        } else {
          downlond.style.position = "absolute";
          downlond.style.bottom = "0px";
        }
      }
      //滚动时左右对应
      const scrollItems = document.querySelectorAll(".bigPic");
      const smallPic = document.querySelectorAll(".smallPic")[0];
      const smallItems = document.querySelectorAll(".pics");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        if (scrollItems[i].getBoundingClientRect().top < 350) {
          // console.log(i);
          setTimeout(() => {
            this.pic_id = i;
          }, 100);
          // console.log(smallItems[i].offsetTop > window.innerHeight/2,"就是")
          // if (smallItems[i].offsetTop > window.innerHeight / 2) {
          //   // smallItems[i].scrollTop = 1000
          //   smallPic.scrollTop =
          //     smallItems[i].offsetTop - smallItems[i].offsetHeight * 3;
          //   console.log(123);
          // }
          break;
        }
      }
    },
    //点击锚点
    chosePic(index) {
      // console.log(document.documentElement.scrollTop)
      // console.log(index);
      // const bigPic = document.getElementsByClassName("bigPic")[0]; //需要指定的最左侧小预览图
      // // console.log(bigPic.clientHeight, 123);

      // document.documentElement.scrollTop = bigPic.clientHeight * index;
      // this.pic_id = index;
      const items = document.querySelectorAll(".bigPic");
      for (let i = 0; i < items.length; i++) {
        if (index == i) {
          items[i].scrollIntoView({
            block: "center",
            behavior: "smooth",
            inline: "center",
          });
        }
      }
      // this.pic_id = index;
    },
    onScroll(e) {
      console.log(e);
      const scrollItems = document.querySelectorAll(".pptRight");
      // for (let i = scrollItems.length - 1; i >= 0; i--) {
      //   // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
      //   let judge =
      //     e.target.scrollTop >=
      //     scrollItems[i].offsetTop - scrollItems[0].offsetTop;
      //   if (judge) {
      //     this.pic_id = i;
      //     break;
      //   }
      //   console.log(this.pic_id)
      // }
    },
    //获取文件下载链接
    downLoad() {
      if (this.loginStatus == 1) {
        url_kejian({
          md5key: localStorage.getItem("md5key"),
          id: this.kejianid,
        }).then((res) => {
          console.log(res);
          // window.open(res.retRes.download_file_url, "_blank");
          if (res.retInt == 1) {
            let url = res.retRes.download_file_url;
            const a = document.createElement("a");
            a.href = url;
            a.download = res.retRes.title;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
        });
      }else{
        this.dialogVisible = true;
      }
    },
    //点击课件前往课件详情
    goresDetails(id, lx, suffix) {
      console.log(id, lx, suffix);
      //有分类型，并且类型为贝壳资源包
      if (lx && lx == 2) {
        this.$router.push({
          name: "Beikeziyuan",
          query: {
            id: id,
            path:this.routeurl,
            routeName:this.routeName
          },
        });
        //有分类型，并且类型为课件
      } else if (lx && lx == 1 && suffix !='zip' && suffix != 'rar') {
        console.log("kejian ");
        // console.log("推荐课件")
        this.$router.push({
          name: "ResDetails",
          query: {
            id: id,
            path:this.routeurl,
            routeName:this.routeName
          },
        });
        this.reload(); //刷新页面
        //非推荐，全部为正常课件
      } else if(suffix =='zip' || suffix == 'rar') {
        this.$router.push({
          name: "ZipResDetails",
          query: {
            id: id,
            path:this.routeurl,
            routeName:this.routeName
          },
        });
        this.reload(); //刷新页面
      }
    },
    //跳转广告图
    advert(href) {
      window.open(href, "_blank");
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //前往账号登录
    goLogin(){
      this.$router.push({
        name:'Login',
        query:{
          zhanghao:1
        }
      })
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f0f5;
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .nowAdreess {
        display: inline-block;
        // width: 90px;
      }
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
            white-space: wrap;

            p {
              width: 550px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .beikeziyuan {
      display: flex;
      align-items: center;
      background-color: #fff;
      .beike {
        display: flex;
        align-items: center;
        padding: 20px;
        // margin-bottom: 20px;
        width: 1200px;
        // height: 150px;
        background-color: #fff;
        img {
          // margin: 0px 20px 0 20px;
          margin: 0 20px;
          margin-right: 30px;
          width: 74px;
          height: 84px;
        }
        .details {
          width: 800px;
          // padding-top: 20px;
          .title {
            display: flex;
            margin: 0;
            margin-bottom: 16px;
            span {
              display: inline-block;
              position: relative;
              top: 2px;
              margin-right: 10px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }
            h3 {
              // margin-left: 10px;
              // margin-top: 22px;
              width: 800px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          .msg {
            padding: 0;
            // width: 700px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #626366;
            .intro {
              max-height: 72px;
              overflow: hidden;
              p {
                height: 24px;
              }
            }
            .bottom {
              display: flex;
              align-items: center;
              margin-top: 15px;
              color: #939599;
              font-size: 12px;
              font-family: Microsoft YaHei;
              .upTime {
                margin-right: 29px;
              }
              .rate {
                display: flex;
                margin-right: 38px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
              .recNum {
                a {
                  color: red;
                }
              }
            }
          }
        }
      }
      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 60px;
        cursor: pointer;
        width: 100px;
        i {
          margin-bottom: 5px;
          font-size: 28px;
          color: #c8cacc;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
      .getsc {
        i {
          background-color: linear-gradient(-45deg, #7defcf, #05bc89);
          color: #05bc89;
        }
        p {
          color: #08a579;
        }
      }
    }
  }
  .content {
    display: flex;
    margin-bottom: 20px;
    width: 1200px;
    margin: 20px auto;
    .left {
      position: relative;
      width: 820px;
      // margin-right: 20px;
      // width: 820px;
      background-color: #fff;
      border: 1px solid #dee0e3;
      border-bottom: 0;
      .pptTop {
        position: static;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        width: 820px;
        background-color: #fff;
        border-bottom: 1px solid #dee0e3;
        font-size: 14px;
        z-index: 1000;
        span {
          margin-left: 14px;
          color: #333;
        }
        .progress {
          margin-right: 20px;
          color: #969799;
        }
      }
      .pptLeft {
        position: absolute;
        .smallPic {
          text-align: center;
          width: 120px;
          background-color: #fff;
          // border: 1px solid #dee0e3;
          border-right: 1px solid #dee0e3;
          border-bottom: 1px solid #dee0e3;
          border-top: 0;
          height: 75vh;
          -ms-overflow-style: none; /* IE 10+ */
          scrollbar-width: none; /* Firefox */
          overflow-y: scroll;
          img {
            width: 100px;
            // height: 53px;
            border-radius: 4px;
            object-fit: cover;
          }
        }
        ::-webkit-scrollbar {
          width: 4px;
        }
        ::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.1);
          background: #d4d4d4;
          border-radius: 5px;
        }
        ::-webkit-scrollbar-button {
          background-color: #eee;
          display: none;
        }
        ::-webkit-scrollbar-corner {
          background-color: black;
        }
        .choseImg {
          border: 3px solid #08a579;
        }
      }
      .pptRight {
        // margin-top: 80px;
        margin-left: 120px;
        // overflow: scroll-y;
        .bigPic {
          // overflow: scroll;

          img {
            width: 700px;
            object-fit: cover;
          }
          .mp3File {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 448px;
            img {
              margin-top: 100px;
              width: 74px;
              height: 84px;
            }
            p {
              margin-top: 15px;
              font-size: 16px;
            }
            audio {
              margin-top: 60px;
              width: 600px;
            }
          }
        }
        // height: 895px;
        // -ms-overflow-style: none; /* IE 10+ */
        // scrollbar-width: none; /* Firefox */
        // overflow-y: scroll;

        // ::-webkit-scrollbar {
        //   display: none; /* Chrome Safari */
        // }
        .jindu {
          position: absolute;
          bottom: 120px;
          width: 700px;
          height: 50px;
          line-height: 50px;

          text-align: center;
          background-image: linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0),
            #fff 86%
          );
        }
        .jindutext {
          text-align: center;
          height: 60px;
          line-height: 60px;
          font-size: 14px;
          color: #999;
        }
        .downlond {
          position: fixed;
          bottom: 0px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: sticky;
          bottom: 0px;
          width: 699px;
          height: 60px;
          background: #ffffff;
          border: 1px solid #dee0e3;
          cursor: pointer;
          span {
            margin-left: 20px;
            width: 430px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #646566;
          }
          .downFile {
            margin-right: 20px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            width: 120px;
            height: 40px;
            background: #08a579;
            border-radius: 4px;
          }
        }
      }
    }
    .noFile {
      position: relative;
      p {
        margin-bottom: 500px;
        margin-top: 100px;
        font-size: 16px;
        text-align: center;
      }
      .downlond {
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        bottom: 0px;
        width: 819px;
        height: 60px;
        background: #ffffff;
        border: 1px solid #dee0e3;
        cursor: pointer;
        span {
          margin-left: 20px;
          width: 430px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          color: #646566;
        }
        .downFile {
          margin-right: 20px;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          width: 120px;
          height: 40px;
          background: #08a579;
          border-radius: 4px;
        }
      }
    }
    .right {
      overflow: hidden;
      margin-left: 20px;
      .righttop {
        margin-bottom: 20px;
        width: 360px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .title2 {
          display: flex;
          margin-top: 20px;
          span {
            display: inline-block;
            position: relative;
            top: 5px;
            width: 4px;
            height: 20px;
            background: #08a579;
            border-radius: 2px;
          }
          h2 {
            margin-left: 10px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            color: #333333;
          }
        }
        #box {
          display: flex;
          margin: 20px;
          padding-bottom: 20px;
          border-bottom: 1px dashed #ccc;
          cursor: pointer;
          img {
            width: 60px;
          }
          .msg {
            position: relative;
            margin-left: 15px;
            .title {
              margin-bottom: 5px;
              font-size: 14px;
              // font-weight: 900;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              color: #333;
              img{
                position: relative;
                top: 3px;
                margin: 0 5px;
                width: auto;
                height: 14px;
              }
            }
            p {
              min-height: 36px;
              font-size: 12px;
              color: #666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              a {
                color: red;
              }
            }
            .bottom {
              position:absolute;
              bottom: -4px;
              // top: 24px;
              display: flex;
              align-items: center;
              color: #939599;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                color: #939599;
                margin-left: 10px;
                i {
                  margin-right: 5px;
                }
              }
              .rate {
                display: flex;
                margin-right: 10px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
            }
          }
        }
      }
      .rightbottom {
        position: static;
        top: 10px;
        width: 360px;
        height: 460px;
        background: #ffffff;
        overflow: hidden;
        .title2 {
          display: flex;
          margin-top: 20px;
          span {
            display: inline-block;
            position: relative;
            top: 5px;
            width: 4px;
            height: 20px;
            background: #08a579;
            border-radius: 2px;
          }
          h3 {
            margin-left: 10px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            color: #333333;
          }
        }
        .box {
          text-align: center;
          .pic {
            margin-bottom: 20px;
            text-align: center;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            img {
              margin-top: 40px;
              // width: 100px;
              height: 133px;
              object-fit: cover;
            }
          }
          h3 {
            margin: 0 auto;
            margin-bottom: 20px;
            width: 218px;
            font-size: 14px;
            color: #333;
          }
          p {
            margin: 0 auto;
            margin-bottom: 30px;
            width: 321px;
            font-size: 14px;
            color: #939599;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          span {
            display: inline-block;
            width: 120px;
            height: 40px;
            background: #08a579;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .guanggao {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
    cursor: pointer;
    .banner {
      margin: 0px auto;
      width: 100%;
      .el-carousel {
        width: 100%;
        height: 160px;
        // border-radius: 20px;
        .el-carousel__item {
          width: 100%;
          height: 160px;
          img {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
    overflow: hidden;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    margin-right: 10px;
    color: #c0c1c5;
    font-size: 18px;
    font-weight: 600;
  }
  /deep/.el-dialog__headerbtn {
    right: 36px;
  }
  .login {
    text-align: center;
    .tcTop {
      margin-bottom: 32px;
      text-align: center;
    }
    .dlevm {
      margin: 0 auto;
      text-align: center;
      width: 240px;
      height: 240px;
      img {
        width: 240px;
        height: 240px;
      }
    }
    p {
      margin-top: 16px;
      margin-bottom: 35px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    .gologin {
      margin: 0 auto;
      text-align: center;
      width: 400px;
      height: 60px;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      background: rgba(242, 237, 237, 0);
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>